<!--
 * @Author: xiawei 1243162387@qq.com
 * @Date: 2024-04-25 10:38:29
 * @LastEditors: xiawei 1243162387@qq.com
 * @LastEditTime: 2024-04-25 16:21:06
-->
<template>
    <VcForm ref="CustomeFormRef" :fields="formConfig.fields" :label-width="formConfig.labelWidth">
        <template v-slot:btnGroups>
            <el-button plain type="primary" :loading="loading" @click="onSubmit">提交</el-button>
            <el-button plain @click="resetForm()">重置</el-button>
        </template>
    </VcForm>
</template>

<script lang="ts" setup>
import { ElMessageBox } from 'element-plus'
import { getFields } from './fields'
import useForm from '@/hooks/useForm'
const {
    // 表单实例
    CustomeFormRef,
    // 表单验证
    validateForm,
    // 控制多次点击
    loading,
    // 获取表单数据
    getFormData,
    // 重置表单数据
    resetForm
} = useForm()
const formConfig = {
    fields: getFields(),
    labelWidth: 100
}
// 自定义提交函数
const onSubmit = async () => {
    const valid: boolean = await validateForm()
    if(valid){
        submitCallback(getFormData())
    }
}
// 表单提交callback
const submitCallback = (data: unknown) => {
    loading.value = true;
    ElMessageBox.alert(`提交数据：${JSON.stringify(data)}`, {
        confirmButtonText: 'OK'
    }).finally(() => {
        loading.value = false
    })
}
</script>